<template>
	<view>
		<u-navbar placeholder>
		    <view slot="left">
				<u-text text="首页" size="18" bold></u-text>
		    </view>
		    <view slot="center">		        
		    </view>
			<view slot="right">
				<u-icon name="search" size="24" bold @click="GoSearchApp()"></u-icon>
			</view>
		</u-navbar>
		<mescroll-body ref="mescrollRef" :down="downOption" :up="upOption"  beforeEndDelay="2000" @init="mescrollInit"
		    @down="downCallback">
			<view class="banner">
			    <u-swiper :list="list" keyName="adimgurl" duration="666" interval="6000" autoplay
			        circular radius="10px" @click="GoLink" showTitle  indicator  previousMargin="0" nextMargin="0"  indicatorMode="dot" height="168" bgColor="rgba(00,00,00,0)">
			    </u-swiper>
			</view>
			<view class="hotcard">
			    <view class="hotnewtitle">
					<u-text text="软件标签" align="left" bold></u-text>
					<u-text text="查看更多" align="right" size="12" color="#2469f6" bold @click="Gotaglist()"></u-text>
				</view>
			    <u-scroll-list :indicator="false">
			        <view class="hot" style="flex-direction: row;">
			            <block v-for="(tag, tagindex) in Apptag" :key="tagindex">
							<u-tag @click="Gotagapp(tag.id,tag.tag)" v-if="tagindex==0" :text="tag.tag" bgColor="#2469f6" borderColor="rgba(00,00,00,0)" color="#fff" shape="circle" style="margin-right: 5px;"/>
			                <u-tag @click="Gotagapp(tag.id,tag.tag)" v-else :text="tag.tag" plainFill plain borderColor="rgba(00,00,00,0)" color="#2469f6" shape="circle" style="margin-right: 5px;"/>
			            </block>
			        </view>
			    </u-scroll-list>
			</view>
			<view class="hotcard">
			    <view class="hotnewtitle">
					<u-text text="热门软件" align="left" bold></u-text>
					<u-text text="查看更多" align="right" size="12" color="#2469f6" bold @click="Gohotlist()"></u-text>
				</view>
			    <u-scroll-list :indicator="false">
			        <view class="hot" style="flex-direction: row;">
			            <view class="hotapk" v-for="(hot, hotindex) in HotApk" :key="hotindex"   @click="GoApk(hot.id)">
			                <view class="hotborder">
								<u-image :src="hot.appicon" width="60" height="60" radius="12" mode="widthFix"
								    loadingIcon="hourglass"></u-image>
							</view>
			                <text class="hotname">{{ hot.appname }}</text>
			            </view>
			        </view>
			    </u-scroll-list>
			</view>
			<view class="hotcard">
			    <view class="hotnewtitle">
					<u-text text="最新发布" align="left" bold></u-text>
					<u-text text="查看更多" align="right" size="12" color="#2469f6" bold @click="Gonewlist()"></u-text>
				</view>
				<block v-for="(news, newsindex) in NewApk" :key="newsindex">
				    <view class="newapk" @click="GoApk(news.id)">
				        <view class="newicon">
				            <u-image :src="news.appicon" width="125rpx" height="125rpx" radius="12" mode="widthFix"
				                loadingIcon="hourglass"></u-image>
				        </view>
				        <view class="newdetail">
				            <view class="newnum">
				                <u-text :text="news.appname"></u-text>
				            </view>
							<view class="newnum">
								<view>
									<u-rate v-if="news.appmod==0" :value="1" size="15" :count="1" readonly activeColor="#2469f6"></u-rate>
									<u-rate v-else-if="news.appmod==1" :value="1" size="15" :count="1" readonly activeColor="#1a9f35"></u-rate>
								</view>
							    <view style="padding-top: 2px;">
									<u-text :text="news.appstar" v-if="news.appmod==0" size="13" color="#2469f6"></u-text>
									<u-text :text="news.appstar" v-if="news.appmod==1" size="13" color="#1a9f35"></u-text>
								</view>
								<u-text :text="news.appbb" size="13" style="margin-left: 10px;" color="#6c6c6c" ></u-text>
							</view>
				            <view class="newnum">				                
								<text class="nomod" v-if="news.appmod==0">原版</text>
								<text class="mod" v-else-if="news.appmod==1">MOD</text>
								<view>
									<u-text size="14" :text="news.appdata+'MB  · '+news.appdownnum+'次下载'" color="#6c6c6c" lines="1"></u-text>
								</view>
				            </view>				            
				        </view>
				        <view class="newbtn">
							<u-tag text="下载" plainFill plain borderColor="rgba(00,00,00,0)" color="#2469f6" shape="circle" @click="GoApk(news.id)"/>
				        </view>
				    </view>
				</block>
			</view>
		</mescroll-body>
		<u-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>
	</view>
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    import API from '../../util/request.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
                list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
                HotApk: [],
                NewApk: [],
				Apptag: [],
                downOption: {
                	use: true, // 是否启用下拉刷新; 默认true
                	auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                	native: false, // 是否使用系统自带的下拉刷新; 默认false; 仅mescroll-body生效 (值为true时,还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)
                	autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
                	isLock: false, // 是否锁定下拉刷新,默认false;
                	offset: 70, // 在列表顶部,下拉大于80upx,松手即可触发下拉刷新的回调
                	inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                	outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
                	bottomOffset: 20, // 当手指touchmove位置在距离body底部20upx范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
                	minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
                	beforeEndDelay: 400, // 延时结束的时长 (显示加载成功/失败的时长, android小程序设置此项结束下拉会卡顿, 配置后请注意测试)
                	bgColor: "#f9f9f9", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
                	textColor: "#2469f6", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
                	textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
                	textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
                	textLoading: '加载中 ...' // 加载中的提示文本
                },
                upOption: {
                	use: false, // 是否启用上拉加载; 默认true
                	auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                	isLock: false, // 是否锁定上拉加载,默认false;
                }
            }
        },
        methods: {
            //下拉刷新
            downCallback() {
				uni.request({
					url: API.getads()+'0',
					success: res => {
						var adlist = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
						this.list = adlist.data;
						// console.log(this.list)
						uni.request({
							url: API.gettags()+'?page=1&limit=10',
							success: res => {
								// console.log(res)
								var tagdata = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
								
								this.Apptag =tagdata.data;
								uni.request({
									url: API.newhotApp()+'appdownnum&page=1&limit=10',
									success: res => {
										var data = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
										// console.log(data.data)
										this.HotApk =data.data;
										uni.request({
											url: API.newhotApp()+'apptime&page=1&limit=10',
											success: res => {
												var datas = JSON.parse(this.AES.decrypt(res.data, API.JmKey(), API.JmIv()));
												// console.log(datas.data)
												this.NewApk =datas.data;
												this.mescroll.endSuccess(data);
											}
										}) 
									}
								})
							}
						})
					}					
				})
            },
            //跳转搜索软件
            GoSearchApp:function(){
               uni.navigateTo({
                   url:'/pages/commen/search'
               }) 
            },
            //跳转标签
            Gotaglist:function(){
               uni.navigateTo({
                   url:'/pages/commen/taglist'
               }) 
            },
            //轮播跳转
            GoLink: function(e) {
                plus.runtime.openURL(this.list[e].adlink)
            },
            //跳转更多最新软件
            Gonewlist() {
                uni.navigateTo({
                    url: '/pages/commen/hotnewlist?paixu=apptime'
                })
            },
			//跳转更多最热软件
			Gohotlist() {
			    uni.navigateTo({
			        url: '/pages/commen/hotnewlist?paixu=appdownnum'
			    })
			},
            //跳转软件页
            GoApk(id) {
                uni.navigateTo({
                    url: '/pages/ruanher/ruanherview?appid=' + id
                })
            },
			//跳转标签列表页
            Gotagapp:function(id,tag){
            	uni.navigateTo({
            	    url: '/pages/commen/tagapplist?id=' + id +'&tag='+tag
            	})
            },
            //无网络
            disconnected() {
                console.log('disconnected');
            },
            connected() {
                // console.log('connected');
            },
            retry() {
                console.log('retry');
            }            
        }
    }
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	//热门软件
	.hotcard {
	    margin: 0 10px;
	    border-radius: 25px;
	    // padding: 0 0 10rpx 28rpx;
	    background-color: #ffffff;
	    // box-shadow: 1rpx 1rpx 10rpx rgba(200, 200, 200, 0.1);
	}
	.hotnewtitle{
		@include flex(row);
		justify-content: space-between;
	}
	.hot {
	    margin-top: 15rpx;
	    @include flex(column);
	    text-align: center;
	}
	.hotborder{
		border-radius: 14px;
		border: #dcdcdc 1px solid;
	}
	.hotapk {
		margin-left: 2px;
		@include flex(column);
		align-items: center;
		// background-color: #000000;
	    width: 60px; 
	    margin-right: 5px; 
	}
	
	.hotname {
		margin-top: 5px;
		max-width: 60px;
		text-align: center;
	    color: #666666;
	    font-size: 16px;
	    overflow:hidden;
	    text-overflow: ellipsis;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	
	.hotmore {
	    background-color: #f1f1f6;
	    border-radius: 8px;
	    padding: 5px;
	    @include flex(column);
	    align-items: center;
	}
	.newapk {
	    width: 100%;
	    display: flex;
		margin-top: 6px;
		margin-bottom: 10px;
		justify-content: space-between;
	}
	
	.newicon {
		width: 125rpx;
	    height: 125rpx;
	    flex: 1;
	    border-radius: 14px;
	    border: #dcdcdc 1px solid;
	}
	
	.newdetail {
	    flex: 4;
	    margin-left: 0rpx;
	    padding: 0rpx 16rpx 0rpx 16rpx;
		display: flex;
		flex-direction: column;
	}
	
	.newname {
	    color: #000000;
	    font-size: 18px;
	    overflow: hidden;
	    text-overflow: clip;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	
	.newcontent {
	    color: #666666;
	    font-size: 13px;
	    overflow: hidden;
	    text-overflow: clip;
	    display: -webkit-box;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
	}
	
	.newnum {
	    display: flex;
		align-items: center;
		flex: 1;
	}
	.nomod {
	    padding: 4px 10rpx;
	    margin-right: 16rpx;
	    border-radius: 6px;
	    background-color: #2469f6;
	    font-size: 9px;
	    color: #fff;
	}
	.mod {
	    padding: 4px 10rpx;
	    margin-right: 16rpx;
	    border-radius: 6px;
	    background-color: #1a9f35;
	    font-size: 9px;
	    color: #fff;
	}
	.newbtn {
	    flex: 1;
	    display: flex;
	    align-items: center;
		justify-content: flex-end;
	}
</style>